import React, { Component } from 'react';
import Banner from 'pages/home/banner/banner'
import BannerBottom from 'pages/home/bannerbotton/bannerbotton'
import {Dividerline} from 'components/common/Dividerline'
import {Header} from 'components/common/Header'
import {SearchContainer,SearchContent,AppLogo,SearchInput,RightBox} from 'components/common/search/index'
import search from 'images/search.png'
import Cellbox from 'pages/home/cellbox/index'
import {HomeInnerContainerBetterScroll} from 'pages/home/homeContainer'

import Scroll from 'react-bscroll'
import 'react-bscroll/lib/react-scroll.css'

class HomeMainCotainer extends Component {
    style={
        display: "flex",
        flex:"1",
        height:"75%",
        justifyContent:" flex-start",
        backgroundColor: "#fff",
        lineHeight:"0.3rem",
        fontSize: ".15rem"
    
      }


      compoentDidMount () {
        // 获取实例  使用了better-scroll
        this.scrollObj = this.refs.scroll.getScrollObj()
      }

    render() {
        return (
    <div>
        <Header className="header">
           <SearchContainer className="app-header-wrapper">
             <SearchContent>
               <AppLogo className="app-header-left">
                  <div>
                       <img className="applogo-pic" alt="" src=""/>
                  </div>
               </AppLogo>

               <SearchInput style={this.style}>
                  <img src={search} className="search-pic" alt=""/>
                  <span className="search-innertext">搜索商品名称</span>
               </SearchInput>

               <RightBox>
                 <i className="rightLogo"></i>
               </RightBox>

             </SearchContent>
           </SearchContainer>
       </Header>

        <HomeInnerContainerBetterScroll>
        <Scroll ref='scroll'>
            <Banner></Banner>
            <BannerBottom></BannerBottom>
            <Dividerline></Dividerline>
            <Cellbox></Cellbox>
        </Scroll>
        </HomeInnerContainerBetterScroll>


    </div>
        );
    }
}

export default HomeMainCotainer;